<template>
  <div>
    <van-nav-bar title="地图找房" left-arrow @click-left="$router.go(-1)" />
    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler">
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
      <!-- 标注图标对象 -->
      <bm-marker :position="{ lng: 116.404, lat: 39.915 }" :dragging="true">
        <bm-label
          content="我爱北京天安门"
          :labelStyle="{ color: 'red', fontSize: '12px' }"
          :offset="{ width: -35, height: 30 }"
        />
      </bm-marker>
    </baidu-map>
  </div>
</template>
<script>
import { getAreaMap } from '@/api/area'
export default {
  name: 'baidu_map',
  data () {
    return {
      center: { lng: 116.404, lat: 39.915 },
      zoom: 12,
      position: []
    }
  },
  methods: {
    handler ({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 11
    }
  },
  async created () {
    //根据区域id 返回房源信息
    //TODO
    await getAreaMap()
  }
}
</script>
<style lang="less" scoped>
.bm-view {
  width: 100%;
  height: 620px;
}
.van-bar {
  em {
    color: #999;
  }
}
/deep/.van-nav-bar__content {
  background-color: #21b97a;

  .van-nav-bar__title {
    color: #fff;
    font-size: 18px;
  }
  .van-icon-arrow-left {
    color: #fff;
  }
}
</style>
